{% extends "index.html" %}
{% block title %}OMS{% endblock %}
{% block css %}
<!-- DataTables-->
<link rel="stylesheet" href="/static/plugins/dataTables/css/dataTables.css">
{% endblock %}
{% block content %}
       <div class="row">
            <div class="col-md-12">
               <!--breadcrumbs start -->
               <ul class="breadcrumb">
                     <li><a href="{% url 'index' %}">Dashboard</a>
                     </li>
                     <li>资产管理</li>
                     <li class="active">网络设备资产</li>
               </ul>
               <!--breadcrumbs end -->
               <h1 class="h1">网络设备资产</h1>
            </div>
       </div>

       <div class="row">
            <div class="col-md-12">
                 <div class="panel panel-default">
                      <div class="panel-body">
                           {% if all_device_list %}
                           <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                               <thead>
                                   <tr>
                                      <th>ID</th>
                                      <th>IP</th>
                                      <th>主机名</th>
                                      <th>厂商</th>
                                      <th>产品型号</th>
                                      <th>机柜编号</th>
                                      <th>硬件序列号</th>
                                      <th>备注</th>
                                   </tr>
                               </thead>
                               
                               <tbody>
                               {% for each_device in all_device_list %}
                                   <tr>
                                      <td>{{ forloop.counter }}</td>
                                      <td>{{ each_device.ip }}</td>
                                      <td>{{ each_device.hostname }}</td>
                                      <td>{{ each_device.manufacturer }}</td>
                                      <td>{{ each_device.productname }}</td>
                                      <td>{{ each_device.idc_jg }}</td>
                                      <td>{{ each_device.service_tag }}</td>
                                      <td>{{ each_device.remark }}</td>
                                   </tr>
                               {% endfor %}
                               </tbody>
                            </table>
                           {% endif %}
                            <div class="row">
                                 <div class="col-xs-6">
                                       <div class="dataTables_info" id="example_info" role="alert" aria-live="polite" aria-relevant="all"></div>
                                 </div>
                                 <div class="col-xs-6">
                                      <div class="dataTables_paginate paging_simple_numbers" id="exmaple_paginate">
                                           <a href="{% url 'add_device' %}" class="btn btn-info btn-sm" role="button">添加</a>
                                           {% if all_device_list.has_previous %}
                                                <a href="?page={{ all_device_list.previous_page_number }}">上一页</a>
                                           {% endif %}
                                           <span class="current">
                                                第{{ all_device_list.number }}页，共{{ all_device_list.paginator.num_pages }}页
                                           </span> 
                                           {% if all_device_list.has_next %}
                                                <a href="?page={{ all_device_list.next_page_number }}">下一页</a>
                                           {% endif %}
                                      </div>
                                 </div>
                           </div> <!--row end-->
                         </div>
                     </div>
                 </div>
             </div>
      	<!--row end-->

{% endblock %}
